<template>
  <div style="width: 1200px;margin:0 auto 30px">
    <el-row :gutter="20">
      <el-col :span="5">
        <!--图书分类开始-->
        <div>
          <el-card class="card">
            <div
                style="background-color: rgb(162, 131, 116);height: 40px;color: white;text-align: center;line-height: 40px">
              <span>图书分类</span>
            </div>
            <div v-for="fc in category">
              <div style="padding: 0px 7px 0px 18px">
                <p class="firstCategory">
                  <a :href="'/category?id='+fc.id">{{ fc.name }}</a>
                </p>
                <span v-for="sc in fc.categoryList">
                  <span class="secondCategory" style="margin-right: 10px;font-size: 15px">
                    <a :href="'/category?id='+sc.id">{{ sc.name }}</a></span>
                </span>
              </div>
            </div>
          </el-card>
        </div>
        <!--图书分类结束-->
      </el-col>
      <el-col :span="14">
        <div>
          <!--轮播图开始-->
          <el-carousel height="300px">
            <el-carousel-item v-for="b in bannerArr">
              <img :src="b.url" style="width:100%;height: 100%">
            </el-carousel-item>
          </el-carousel>
          <!--轮播图结束-->
        </div>
        <!--精品推荐开始-->
        <div>
          <p style="text-align: center;font-size: 25px;font-weight: bold;color: blueviolet">精品推荐</p>
          <div>
            <el-row :gutter="10">
              <el-col :span="6" v-for="p in productRecommendArr">
                <el-card style="padding-bottom: 10px">
                  <div style="padding: 10px">
                    <a :href="'/detail?id='+p.id"><img class="p_img" :src="p.url" width="145" height="145"></a>
                  </div>
                  <div style="width:165px">
                    <a :href="'/detail?id='+p.id" style="color: #3f3f3f;text-decoration: none">
                      <p style="font-size: 15px;margin: 0;height: 30px;padding-left: 20px">{{ p.name }}</p>
                    </a>
                    <div style="color: #6c6c6c">
                      <span style="margin-left: 20px;color: red;font-weight: bold">￥{{ p.discountPrice }} </span>
                      <span style="font-size: 12px;
                                text-decoration: line-through">{{ p.fixedPrice }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--精品推荐结束-->
        <!--新书首发开始-->
        <div>
          <p style="text-align: center;font-size: 25px;font-weight: bold;color: blueviolet">新书首发</p>
          <div>
            <el-row :gutter="10">
              <el-col :span="6" v-for="p in productNewStartArr">
                <el-card style="padding-bottom: 10px">
                  <div style="padding: 10px">
                    <a :href="'/detail?id='+p.id"><img class="p_img" :src="p.url" width="145" height="145" alt=""></a>
                  </div>
                  <div style="width:165px">
                    <a :href="'/detail?id='+p.id" style="color: #3f3f3f;text-decoration: none">
                      <p style="font-size: 15px;margin: 0;height: 30px;padding-left: 20px">{{ p.name }}</p>
                    </a>
                    <div style="color: #6c6c6c">
                      <span style="margin-left: 20px;color: red;font-weight: bold">￥{{ p.discountPrice }} </span>
                      <span style="font-size: 12px;
                                text-decoration: line-through">{{ p.fixedPrice }}</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--新书首发结束-->
      </el-col>
      <el-col :span="5">
        <!--畅销榜开始-->
        <div style="margin-bottom: 20px">
          <el-card style="background-color: rgb(162, 131, 116);">
            <h3 style="color: white;margin-left: 10px"><i style="font-weight: bold"
                                                          class="el-icon-trophy"></i> 畅销榜</h3>
            <el-table :data="bestSellerTopArr" style="width: 232px">
              <el-table-column label="排名" type="index" width="50px"></el-table-column>
              <el-table-column label="书名名">
                <!--scope.row代表topArr数组中遍历的对象-->
                <template slot-scope="scope">
                  <a :href="'/detail?id='+scope.row.id"
                     style="text-decoration: none;color: #333">{{ scope.row.name }}</a>
                </template>
              </el-table-column>
              <el-table-column label="销量" prop="saleCount"></el-table-column>
            </el-table>
          </el-card>
        </div>
        <!--畅销榜结束-->
        <!--新书榜开始-->
        <div>
          <el-card style="background-color: rgb(162, 131, 116);">
            <h3 style="color: white;margin-left: 10px"><i style="font-weight: bold"
                                                          class="el-icon-trophy"></i> 新书榜</h3>
            <el-table :data="newBookTopArr" style="width: 232px">
              <el-table-column label="排名" type="index" width="50px"></el-table-column>
              <el-table-column label="书名名">
                <!--scope.row代表topArr数组中遍历的对象-->
                <template slot-scope="scope">
                  <a :href="'/detail?id='+scope.row.id"
                     style="text-decoration: none;color: #333">{{ scope.row.name }}</a>
                </template>
              </el-table-column>
              <el-table-column label="销量" prop="saleCount"></el-table-column>
            </el-table>
          </el-card>
        </div>
        <!--新书榜结束-->
      </el-col>
    </el-row>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             background-color="#876c5f"
             text-color="#fff"
             active-text-color="#fff">
      <el-menu-item v-for="c in categoryArr" :index="c.id+''">
        {{ c.name }}
      </el-menu-item>
    </el-menu>
    <!--  按分类展示商品开始  -->
    <div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="p in productArr" style="margin-top: 10px;margin-bottom: 10px">
          <el-card style="padding-bottom: 10px">
            <div style="padding: 10px">
              <a :href="'/detail?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
            </div>
            <div style="width:100%">
              <a :href="'/detail?id='+p.id" style="color: #3f3f3f;text-decoration: none">
                <p style="font-size: 15px;margin: 0;height: 30px;padding-left: 20px">{{ p.name }}</p>
              </a>
              <div style="color: #6c6c6c">
                <span style="margin-left: 20px;color: red;font-weight: bold">￥{{ p.discountPrice }} </span>
                <span style="font-size: 12px;
                                text-decoration: line-through">{{ p.fixedPrice }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  按分类展示商品结束  -->
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      activeIndex: '1',
      productArr: [
        {id: "1", url: "imgs/acbcn.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", name: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book010000000000000000", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", name: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book010000000000000000", discountPrice: "20.23", fixedPrice: "33.00"}],
      categoryArr: [{id: "1", name: "文学"},
        {id: "2", name: "小说"},
        {id: "3", name: "科技"}],
      category: [],
      bannerArr: [{url: "banner01.jpg"}, {url: "banner02.jpg"}],
      productRecommendArr: [{
        id: "1",
        url: "imgs/acbcn.jpg",
        title: "book01",
        discountPrice: "20.23",
        fixedPrice: "33.00"
      },
        {id: "1", url: "imgs/acbcn.jpg", name: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/acbcn.jpg", title: "book010000000000000000", discountPrice: "20.23", fixedPrice: "33.00"}],
      productNewStartArr: [{id: "1", url: "imgs/wht.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/kd.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/lz.jpg", title: "book01", discountPrice: "20.23", fixedPrice: "33.00"},
        {id: "1", url: "imgs/st.jpg", title: "book010000000000000000", discountPrice: "20.23", fixedPrice: "33.00"}],
      bestSellerTopArr: [{name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"}, {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"}, {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"}],
      newBookTopArr: [{name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"}, {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"}, {name: "简爱", saleCount: "255"},
        {name: "简爱", saleCount: "255"}],
    }
  },
  created: function () {
    sessionStorage.removeItem("_data")
    let categoryUrl = 'http://localhost:8080/categories/showCategory'
    axios.get(categoryUrl).then((response) => {
      let json = response.data
      this.category = json.data
    })
    let bannerUrl = 'http://localhost:8080/banners/getBanner'
    axios.get(bannerUrl).then((response) => {
      let json = response.data
      this.bannerArr = json.data
    })
    let newStartUrl = 'http://localhost:8080/products/getBookForRecommend'
    axios.get(newStartUrl).then((response) => {
      let json = response.data
      this.productRecommendArr = json.data
    })
    let recommendUrl = 'http://localhost:8080/products/getBookForNewStart'
    axios.get(recommendUrl).then((response) => {
      let json = response.data
      this.productNewStartArr = json.data
    })
    let bestSellerTopUrl = 'http://localhost:8080/products/getBestSellerTop'
    axios.get(bestSellerTopUrl).then((response) => {
      let json = response.data
      this.bestSellerTopArr = json.data
    })
    let newBookTopUrl = 'http://localhost:8080/products/getNewBookTop'
    axios.get(newBookTopUrl).then((response) => {
      let json = response.data
      this.newBookTopArr = json.data
    })
    let getCategoryUrl = 'http://localhost:8080/categories/getCategory'
    axios.get(getCategoryUrl).then((response) => {
      let json = response.data
      this.categoryArr = json.data
    })
    let productUrl = 'http://localhost:8080/products/getProductsByCategoryId/1'
    axios.get(productUrl).then((response) => {
      let json = response.data
      this.productArr = json.data
    })
  },
  methods: {
    handleSelect(index) {
      let productUrl = 'http://localhost:8080/products/getProductsByCategoryId/' + index
      axios.get(productUrl).then((response) => {
        let json = response.data
        this.productArr = json.data
      })
    }
  }
}
</script>
<style>
.el-card__body, .el-main {
  padding: 0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}

.card {
  border-radius: 0;
  padding-bottom: 21px;
}

.firstCategory > a {
  text-decoration: none;
  font-size: 20px;
  color: #876c5f;
}

.secondCategory > a {
  text-decoration: none;
  color: #62605b
}

.el-menu-demo {
  margin-top: 10px;
}

</style>